<template>
  <el-tree
    :data="data"
    node-key="id"
    default-expand-all
    @node-drag-start="handleDragStart"
    @node-drag-end="handleDragEnd"
    @node-drop="handleDrop"
    @node-click="click"
    :draggable="true"
    :show-checkbox="showCheckBox"
    :allow-drop="allowDrop"
    :allow-drag="allowDrag"
    :props="defaultProps"
  >
  </el-tree>
</template>
<script>
import {findAllMenu,editOne,updateMenu} from '../../api/menu'
  export default {
    props:['showCheckBox'],
    created(){
      this.initMenu();
    },
    data() {
      return {
        data: [],
        defaultProps: {
          children: "rbacMenus",
          label: "menuname",
        },
      };
    },
    methods: {
      //初始化菜单数据：通常需要传入用户的角色信息，根据角色的不同显示的菜单是不一样的
      // admin 超级管理员要看见菜单所有内容；
      // 普通角色， role_menu中间表来操作就可以
      initMenu(){
        const userdataJSON = localStorage.getItem('userdata');
        const userdata = JSON.parse(userdataJSON);
         //先完成超级管理员的权限
         if(userdata.id == 1){
            findAllMenu().then(
              res=>{
                console.log(res);
                this.data = res.data
              }
            ).catch();
         }
      },
      //开始拖动的那个节点
      handleDragStart(node, ev) {
        console.log("开始拖动：……", node.data.menuname);
      },
      //进入节点成为子节点
      handleDragEnter(draggingNode, dropNode, ev) {
        console.log("tree drag enter: ", dropNode);
      },
      //拖拽结束后的方法
      handleDragEnd(draggingNode, dropNode, dropType, ev) {
        console.log("tree drag end: ", dropNode && dropNode.label, dropType);
      },
      //类似java中的finally
      handleDrop(draggingNode, dropNode, dropType, ev) {
        console.log("被拖拽的节点？",draggingNode);
        //dropNode：目的地节点 after before inner两种情况 
        let fid = null;
          if(dropType == 'inner'){
            //我们可以直接获取dropNode的id作为，我们拖拽节点的fid = dropNode.data.id
            console.log("成为- "+dropNode.data.menuname+"-的子节点",dropNode.data, dropType);
            fid = dropNode.data.id
          }else{
            //after before 表示成为兄弟节点。
            console.log("成为-"+dropNode.data.menuname+"-的兄弟节点",dropNode.parent, dropType);
            //这里要分为2种情况，一种是目标的爸的爸是null
            if(dropNode.parent.parent != null){
              fid = dropNode.parent.data.id;
            }else{
              fid = 0;
            }
          }
          updateMenu(draggingNode.data.id,fid).then().catch();
      },
      //拖拽结束后，返回true节点才会移动
      allowDrop(draggingNode, dropNode, type) {
        // if (dropNode.data.label === "二级 3-1") {
        //   return type !== "inner";
        // } else {
          return true;
        // }
      },
      //返回true才能允许拖动节点
      allowDrag(draggingNode) {
        return true;
      },
// 点击事件，触发回调
      click(a1){
        console.log(a1);
        this.$emit('clickNode',a1)
      }

    },
  };
</script>